<template>
  <div class="search_el-input">
    <el-form
      ref="searchForm"
      :size="size"
      :model="searchData"
      :rules="rules"
      :label-width="labelWidth"
    >
      <div :style="{'display': 'flex', 'flex-wrap': 'wrap', 'flex': count}">
        <!--  添加 单独的字段验证  -->
        <div v-for="(item, index) in searchForm" :key="index" :style="{'width': 91.5 / count + '%'}">
          <div style="display: flex;">
            <div :style="{'width': item.sjkg == 1 ? 'calc(36% + '+ labelWidth +')' : '100%'}">
              <el-form-item :label="item.showname" :prop="item.showname" :rules="item.rules">
                <!-- 输入框 -->
                <el-input
                  v-if="item.mjbs === 'input'"
                  v-model="searchData[item.showname]"
                  style="width:100%"
                  :placeholder="item.placeholder"
                  :maxlength="item.zdcd"
                />

                <!-- 文本域 -->
                <el-input
                  v-if="item.mjbs === 'textarea'"
                  v-model="searchData[item.showname]"
                  type="textarea"
                  el-rows="3"
                  :autosize="true"
                  style="width:100%"
                  :placeholder="item.placeholder"
                  :maxlength="item.zdcd"
                />

                <!-- 数字框 -->
                <el-input
                  v-if="item.mjbs === 'number'"
                  v-model="searchData[item.showname]"
                  type="number"
                  style="width:100%"
                  :placeholder="item.placeholder"
                  size="small"
                  :maxlength="item.zdcd"
                />

                <!-- 密码框 -->
                <el-input
                  v-if="item.mjbs === 'password'"
                  v-model="searchData[item.showname]"
                  type="password"
                  password
                  style="width:100%"
                  :placeholder="item.placeholder"
                  size="small"
                />

                <!-- 下拉框 -->
                <!-- $forceUpdate() 下拉刷新,修复数据改变下拉框不变的bug -->
                <el-select
                  v-if="item.mjbs === 'select' || item.mjbs === 'multiple'"
                  v-model="searchData[item.showname]"
                  size="small"
                  style="width:100%"
                  :placeholder="item.placeholder"
                  clearable
                  filterable
                  :multiple="item.mjbs === 'multiple' ? true : false"
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="op in item.options"
                    :key="op.zdbm"
                    :label="op.zdmc"
                    :value="op.zdbm"
                  >{{ op.zdmc }}</el-option>
                </el-select>

                <!-- 单选 -->
                <el-radio-group v-if="item.mjbs === 'radio'" v-model="searchData[item.showname]">
                  <el-radio v-for="ra in item.options" :key="ra.zdbm" :label="ra.zdbm">{{ ra.zdmc }}</el-radio>
                </el-radio-group>

                <!-- 复选框 -->
                <el-checkbox-group
                  v-if="item.mjbs === 'checkbox'"
                  v-model="searchData[item.showname]"
                  @change="$forceUpdate()"
                >
                  <el-checkbox
                    v-for="ch in item.options"
                    :key="ch.zdbm"
                    :label="ch.zdbm"
                  >{{ ch.zdmc }}</el-checkbox>
                </el-checkbox-group>

                <!-- 日期 -->
                <el-date-picker
                  v-if="item.mjbs === 'date'"
                  v-model="searchData[item.showname]"
                  size="small"
                  type="date"
                  format="yyyy-MM-dd"
                  :placeholder="item.placeholder"
                  style="width:100%;"
                />

                <!-- 时间 -->
                <el-time-select
                  v-if="item.mjbs === 'time'"
                  v-model="searchData[item.showname]"
                  size="small"
                  type="time"
                  :placeholder="item.placeholder"
                  style="width:100%;"
                />

                <!-- 日期时间 -->
                <el-date-picker
                  v-if="item.mjbs === 'datetime'"
                  v-model="searchData[item.showname]"
                  size="small"
                  type="datetime"
                  format="yyyy-MM-dd hh:mm:ss"
                  :placeholder="item.placeholder"
                  style="width:100%;"
                />

                <!-- 起止时间 -->
                <el-date-picker
                  v-if="item.mjbs === 'daterange'"
                  v-model="searchData[item.showname]"
                  size="small"
                  type="daterange"
                  format="yyyy-MM-dd hh:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width:100%"
                />

                <!-- 三级联动 el-cascader -->
                <el-cascader
                  v-if="item.mjbs === 'cascader'"
                  v-model="searchData[item.showname]"
                  size="small"
                  :options="item.options"
                  :placeholder="item.placeholder || '请选择'"
                  :props="item.props"
                  collapse-tags
                  style="width:100%"
                />
              </el-form-item>
            </div>
            <div
              v-if="item.sjkg == 1"
              :style="{'width': 'calc(62% - '+ labelWidth +')', 'margin-left': '2%'}"
              class="form-item"
            >
              <el-form-item
                label-width="0px"
                :prop="'sjkg' + item.showname"
                :rules="{required: true, message: item.showname + '起止时间不能为空', trigger: 'change'}"
              >
                <el-date-picker
                  v-model="searchData['sjkg' + item.showname]"
                  size="small"
                  type="daterange"
                  format="yyyy-MM-dd hh:mm:ss"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%;"
                />
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    isHandle: {
      type: Boolean,
      default: false
    },
    labelWidth: {
      type: String,
      default: '150px'
    },
    size: {
      type: String,
      default: 'small'
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    searchData: {
      type: Object,
      default: () => {}
    },
    count: {
      type: Number,
      default: 1
    }
  },
  computed: {
    /** 解析表单的正则验证***/
    rules() {
      const rules = this.searchForm.reduce((map, i) => {
        if (i.rules) {
          map[i.prop] = i.rules
        }
        return map
      }, {})
      return rules
    }
  },
  watch: {
    searchForm(val) {
      for (var idx in val) {
        if (val[idx].mjbs === 'multiple' || val[idx].mjbs === 'checkbox') {
          this.searchData[val[idx].showname] = this.searchData[val[idx].showname] ? this.searchData[val[idx].showname].split(',') : []
        }
        if (val[idx].options) {
          val[idx].options = JSON.parse(localStorage.getItem('dictList')).find(
            item => item.zdbm === val[idx].options
          ).children
        }
        if (
          val[idx].mjbs === 'input' ||
          val[idx].mjbs === 'password' ||
          val[idx].mjbs === 'number' ||
          val[idx].mjbs === 'textarea'
        ) {
          val[idx].rules = [
            {
              required: val[idx].required,
              message: val[idx].showname + '不能为空！',
              trigger: 'blur'
            }
          ]
        } else {
          val[idx].rules = [
            {
              required: val[idx].required,
              message: val[idx].showname + '不能为空！',
              trigger: 'change'
            }
          ]
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 重置表单
    reset() {
      this.$refs['searchForm'].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-cascader-menu {
  height: auto;
}

::v-deep .el-form-item-label {
  white-space: nowrap;
}

.el-form-item {
  margin-bottom: 8px;
}

::v-deep .el-form-item .el-form-item__error {
  display: none !important;
}
</style>
